<template>
  <view class="viewport">
    <!-- 推荐封面图 -->
    <view class="cover">
      <image class="cover-image" :src="cover" mode="aspectFill" />
    </view>
    <!-- 推荐选项 -->
    <view class="tabs">
      <text class="text" v-for="(item, index) in subs" :key="item.id" :class="{ active: index === activeSubIndex }"
        @tap="activeSubIndex = index">{{ item.title }}</text>
    </view>
    <!-- 推荐列表 -->
    <scroll-view class="scroll-view" :style="{ height: scrollLayoutHeight }" :scroll-y="true"
      v-for="(item, index) in subs" :key="item.id" v-show="index === activeSubIndex" :show-scrollbar="false"
      @scrolltolower="loadMore">
      <view class="goods">
        <navigator class="navigator" hover-class="none" v-for="good in item.goodsItems.items" :key="good.id"
          :url="`/pages/good/good?id=${good.id}`">
          <image class="thumb" :src="good.picture" />
          <view class="name ellipsis">{{ good.name }}</view>
          <view class="price">
            <text class="symbol">￥</text>
            <text class="number">{{ good.price }}</text>
          </view>
        </navigator>
      </view>
      <!-- 加载文字 -->
      <view class="loading-text">
        <text v-if="item.goodsItems.page === item.goodsItems.pages">--已经到底了--</text>
        <template v-else><uni-icons type="spinner-cycle" size="20" /><text>正在加载</text></template>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { getHotRecommandAPI } from '@/apis/hot';
import type { SubTypeItem } from '@/types/hot';

// 获取路由参数
const query = defineProps<{ type: string }>();

// 热门推荐页面分区信息
const hotSectionMap = [
  { type: '1', title: '特惠推荐', url: '/hot/preference' },
  { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  { type: '3', title: '一站买全', url: '/hot/oneStop' },
  { type: '4', title: '新鲜好物', url: '/hot/new' },
];

// 当前热门分区
const currentSection = computed(() => hotSectionMap.find(s => s.type === query.type));

// 封面地址
const cover = ref('');

// 当前选中子选项下标
const activeSubIndex = ref(0);

// 子选项信息列表
const subs = ref<SubTypeItem[]>([]);

// 滚动布局高度
const windowInfo = uni.getWindowInfo();
const scrollLayoutHeight = windowInfo.windowHeight - 280 * windowInfo.windowWidth / 750 + 'px';

// 是否处于加载状态
let loading = false;

// 加载页面数据
const loadMore = async () => {
  // 当前正在显示的热门子选项
  const currentSub = subs.value[activeSubIndex.value];
  // 判断是否有更多加载
  if (currentSub.goodsItems.page === currentSub.goodsItems.pages) return uni.showToast({ icon: 'none', title: '当前没有更多商品推荐' });
  // 加载数据
  if (loading === false) {
    loading = true;
    try {
      const response = await getHotRecommandAPI(currentSection.value!.url, {
        page: currentSub.goodsItems.page + 1,
        pageSize: currentSub.goodsItems.pageSize,
        subType: currentSub.id,
      }).request;
      // 更新数据
      const newSub = response.result.subTypes[activeSubIndex.value];
      currentSub.goodsItems.page++;
      currentSub.goodsItems.items.push(...newSub.goodsItems.items);
    }
    finally {
      loading = false;
    }
  }
};

// 监听路由变化
watch(currentSection, async value => {
  if (value) {
    // 组件内部调整标题
    uni.setNavigationBarTitle({ title: value.title });
    // 加载页面数据
    loading = true;
    try {
      const response = await getHotRecommandAPI(value.url).request;
      const { bannerPicture, subTypes } = response.result;
      cover.value = bannerPicture;
      subs.value = subTypes;
    }
    finally {
      // 重置参数
      loading = false;
    }
  }
}, { immediate: true });
</script>

<style lang="scss">
.viewport {
  display: flex;
  flex-direction: column;
  padding: 180rpx 0 0;
  position: relative;
}

.cover {
  width: 100vw;
  aspect-ratio: 10/3;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;

  .cover-image {
    width: 100%;
    height: 100%;
  }
}

.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;

  .text {
    margin: 0 20rpx;
    position: relative;
  }

  .active {
    &::after {
      content: '';
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #27ba9b;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}

.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;

  .navigator {
    width: 50%;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  .thumb {
    width: 305rpx;
    height: 305rpx;
  }

  .name {
    height: 88rpx;
    font-size: 26rpx;
  }

  .price {
    line-height: 1;
    color: #cf4444;
    font-size: 30rpx;
  }

  .symbol {
    font-size: 70%;
  }

  .decimal {
    font-size: 70%;
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>